<!-- 产品详情 -->
<template>
	<view class="content">

		<view class="header-wrap">
			<image src="https://fh4.qinyuan.cn/uploads/view/static/project-img.png" class="home-img"></image>
			<div class="search-wrap">
				<Search @confirm="handleSearch" :value="keyword" @input="handleInput"></Search>
			</div>
		</view>

		<view class="search-result">
			<view class="result-title">{{ result.length ? '搜索结果' : '暂无结果' }}</view>
			<view class="result-list" :style="result.length === 0 ? 'padding: 0' : ''">
				<view class="result-item" v-for="(item, index) in result" :key="index" @click="goDetail(item)">
					<img :src="'https://fh4.qinyuan.cn' + findImage(item.index_images)" class="home-bg">
					<view class="result-text">{{ item.products_name }}</view>
				</view>
			</view>
		</view>

		<view class="footer-wrap">
			<view class="footer">
				<view class="tab-item home" @click="goPage('/pages/home/home')">
					<img src="../../static/home/home.png" class="tabbar-icon">
					<text class="tabbar-text active">首页</text>
				</view>
				<view class="tab-item product" @click="goPage('/pages/tabbar/tabbar?label=厨下&code=1')">
					<img src="../../static/home/Live.png" class="tabbar-icon">
					<text class="tabbar-text">产品</text>
				</view>
				<view class="tab-item type" @click="goPage('/pages/tabbar/tabbar?label=户型&code=5')">
					<img src="../../static/home/menu.png" class="tabbar-icon">
					<text class="tabbar-text">户型</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Search from '../../components/Search/Search.vue'
import requestV1 from "../../common/requestV1";
	export default {
		components: {
			Search
		},
		data() {
			return {
				safeTop: 30,
				safeBottom: 30,
				keyword: '',
				result: [],
			}
		},
		onLoad(e) {
			this.keyword = e.keyword
			this.searchList()
		},
		methods: {
			handleSearch() {
				this.searchList()
			},
			handleInput(e) {
				this.keyword = e
			},
			goDetail(data) {
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id=' + data.id
				})
			},
			async searchList() {
        try {
          const data = await requestV1({
          	url: '/casemarks/index_search',
          	method: 'post',
          	data: {
          		keyword: this.keyword
          	}
          })
          this.noever = false
          if (data.code == 1) {
          	console.log(data.data, 'data.data')
          	this.result = data.data
          } 
        } catch(err) {
          console.log(`err`, err)
        }
				
			},
			findImage(urls) {
				return urls && urls.split(',')[0]
			},
			goPage(url, links) {
				url = links
						? url + '?url=' + links
						: url
				
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		color: #000;
		background-color: #eff1f3;
		padding-top: 48rpx;
		padding-bottom: 210rpx;
		overflow: auto;
		height: 100vh;
		box-sizing: border-box;

		.header-wrap {
			padding: 0 42rpx;
			height: 99rpx;
			margin-bottom: 36rpx;
			display: flex;
			justify-content: space-between;
			
			.search-wrap {
				width: 49%;
			}

			.home-img {
				width: 49%;
				height: 100%;
			}
		}

		.search-result {
			width: calc(100% - 72rpx);
			margin: 48rpx auto 0;
			background-color: #fff;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
			.result-title {
				font-size: 36rpx;
				color: rgb(0, 155, 222);
				line-height: 72rpx;
				border-bottom: 1rpx solid #ccc;
				font-weight: bold;
				padding-left: 24rpx;
			}
			.result-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 36rpx 48rpx;
        
				.result-item {
					width: 280rpx;
					height: 400rpx;
					margin-bottom: 24rpx;
					.home-bg {
						width: 240rpx;
						height: 320rpx;
						margin-left: 20rpx;
						margin-bottom: 12rpx;
					}
					.result-text {
						text-align: center;
						font-size: 36rpx;
						color: #333;
					}
				}
			}
		}

		.footer-wrap {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 210rpx;
			background: rgb(243, 245, 246) url("../../static/home/tabbar-bg.png") center center no-repeat;
			.footer {
				width: 100%;
				height: 100%;
				background: url("../../static/home/circle.png") center 70rpx no-repeat;
				display: flex;
				justify-content: space-around;
				.tab-item {
					margin-top: 110rpx;
					display: flex;
					flex-direction: column;
					.tabbar-icon {
						width: 54rpx;
						height: 54rpx;
						margin-bottom: 8rpx;
					}
					.tabbar-text {
						text-align: center;
						font-size: 27rpx;
						color: rgba(137, 137, 136, 1);
					}
				}
				.product {
					margin-top: 78rpx;
					.tabbar-icon {
						width: 74rpx;
						height: 74rpx;
						margin-bottom: 0;
					}
					.tabbar-text {
						color: rgba(255, 255, 255, 1);
						margin-top: -8rpx;
					}
				}
				.active {
					color: rgba(55, 68, 134, 1) !important;
				}
			}
		}
	}
</style>
